<template>
  <div class="container">
    <!-- tool start -->
    <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.ordernumber')">
            <el-input maxlength="30" show-word-limit v-model="formInline.ordercode" placeholder></el-input>
          </el-form-item>

        </el-col>

        <el-col :span="8">
          <el-form-item :label="$t('m.out.storeordercode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.storeordercode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.out.tsareaid')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.tsareacode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.out.shopname')">
            <el-select
              filterable
              v-model="formInline.shopid"
              :placeholder="$t('m.choose')"
            >
              <el-option
                v-for="item in shop"
                :key="item.shopid"
                :label="item.shopname"
                :value="item.shopid"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.out.priority')">
            <el-select v-model="formInline.priority">
              <el-option
                v-for="(item,index) in priorityOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.packaging.status')">
            <el-select v-model="formInline.waybillstatus">
              <el-option
                v-for="(item,index) in waybillstatusOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right" @keyup.enter.native.stop>
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          <el-button v-if="hasPermission('packaging')" type="primary" @click="handlePack">{{$t('m.packaging.pack')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table start -->
    <el-table
      ref="table"
      stripe
      empty-text
      fit
      v-loading="tableLoading"
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="ordercode" :label="$t('m.packaging.packagingcode')" >
        <template slot-scope="scope">
          <template v-if="hasPermission('table-packagingcode')">
            <el-button @click.stop="getPackagingDetail(scope.row)" type="text">{{scope.row.packagingcode}}</el-button>
          </template>
          <template v-else>{{ scope.row.packagingcode }}</template>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="tsareacode" :label="$t('m.packaging.tsareacode')"></el-table-column>
      <el-table-column align="center" prop="shopname" :label="$t('m.out.shopname')"></el-table-column>
      <el-table-column align="center" prop="ordercode" :label="$t('m.in.ordernumber')" >
        <template slot-scope="scope">
          <template v-if="hasPermission('table-ordercode')">
            <el-button type="text" @click.stop="
              $router.push({
              path: 'order/orderInfo',
              query: { orderid: scope.row.orderid },})">
              {{ scope.row.ordercode }}
            </el-button>
          </template>
          <template v-else>{{ scope.row.ordercode }}</template>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="storeordercode" :label="$t('m.packaging.storeordercode')"></el-table-column>
      <el-table-column align="center" :label="$t('m.packaging.status')">
        <template slot-scope="scope">{{scope.row.waybillstatus|stateFilters}}</template>
      </el-table-column>
    </el-table>

    <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChange" @size-change="handleSizeChange"></el-pagination>
    <!-- table end -->
    <!-- 打包单详情 dialog 开始 -->
    <packagingDetailsPopup
      v-if="packagingDetailsPopupVisible"
      :dialogVisible="packagingDetailsPopupVisible"
      :detail="packagingDetail"
      @close="packagingDetailsPopupVisible=false">
    </packagingDetailsPopup>
    <!-- 打包单详情 dialog 结束 -->

    <!-- 打包dialog start -->
    <packagingPopup
      v-if="packagingPopupVisible"
      :popupVisible="packagingPopupVisible"
      :detail="packagingData"
      :pacakingData="handlePacakingData"
      :tsareacode="tsareacode"
      @callback="getData"
      @success="packagingSuccess"
      @close="packagingPopupVisible=false">
    </packagingPopup>
    <!-- 打包dialog end -->
  </div>
</template>
<script>
let __this
// import { getLodop } from '@/utils/LodopFuncs'
export default {
  name:'packaging',
  data(){
    return {
      formInline:{
        ordercode:'', // 订单号
        ordertype:'', // 订单类型
        storeordercode:'', // 电商订单号
        tsareacode:'', //暂存区编码
        priority:'', //优先级
        shopid:null, //店铺id
        states:'', //打包状态
        waybillstatus:'', //运单状态
        packagingcode:'' //打包单号
      },
      packagingSubOrderVoList:[],
      handlePacakingData:'',
      packagingDetail:'', //打包单详情
      formLabelWidth:'120px',
      tableData:[],
      shop:[],
      packagingDetailsPopupVisible:false, //打包单详情 dialog 显示隐藏
      packagingPopupVisible:false, // 控制打包dialog显示隐藏
      tsareacode:'', // 分拣位置

      printId:0
    }
  },
  activated(){
    this.getData()
    this.getShop()
  },
  components:{
    packagingPopup:() => import('@/components/packaging/handle-packaging-popup'),
    packagingDetailsPopup:()=>import('@/components/packaging/packaging-details-popup')
  },
  provide(){
    return {
      getFormInfo:() => this.packagingDetail
    }
  },
  beforeCreate(){
    __this = this
  },
  computed:{
    priorityOptions(){
      return [
        // 优先级
        {label:this.$t('m.all'), value:''},
        {label:this.$t('m.out.normal'),value:1},
        {label:this.$t('m.out.priority1'),value:2}
      ]
    },
    waybillstatusOptions(){
      return[
        // 运单状态
        { label:this.$t('m.all'), value:'' },
        { label:this.$t('m.packaging.notapplied'), value:0 },
        { label:this.$t('m.packaging.applied'), value:1 }
      ]
    }
  },
  watch:{
    // 切换语言更改下拉框里的语言
    '$i18n.locale'(){
      this.getShop()
    }
  },
  filters:{
    stateFilters(value){
      let result = __this.waybillstatusOptions.find(item => item.value === value)
      return result?result.label:''
    }
  },
  methods:{
    search(){
      this.page = 1
      this.getData()
    },
    getData(){
      let options = {
        method:'get',
        url:'/packaging/page',
        params:{ ...this.formInline, ...{ page:this.page, rows:this.rowSize } }
      }
      this.tableLoading = true
      this.$axios(options).then(({ data }) => {
        this.tableLoading = false
        this.tableData = data.records
        this.totalRows = data.total
      })
    },
    // 获取店铺信息
    getShop(){
      this.$axios({
        method:'get',
        url:'/shopinfo/list'
      }).then(({ data }) => {
        this.shop = data
        this.shop.unshift({
          shopid:null,
          shopname:this.$t('m.all')
        })
      })
    },
    // 获取打包单详情
    getPackagingDetail(row){
      let options = {
        method:'get',
        url:`/packaging/${row.id}`
      }
      this.$axios(options).then(({ data }) => {
        this.packagingDetail = {...row,...data}
        this.packagingDetailsPopupVisible = true
      })
    },
    // 打包
    handlePack(){
      if(!this.tableRowSelected.length) return this.callbackMessage(this.$t('m.packaging.packValidate'))
      this.tsareacode = this.tableRowSelected.length ? this.tableRowSelected[0].tsareacode : ''
      this.packagingData = this.tableRowSelected.length? this.tableRowSelected[0] : ''
      this.packagingPopupVisible = true
    },
    // 打包成功后，回调，执行打印操作
    packagingSuccess(){
      this.getData()
    }
  },
  beforeRouteLeave(to, form, next){
    this.packagingPopupVisible = false
    this.packagingDetailsPopupVisible = false
    next()
  }
}
</script>